/* 
    Created on : Oct 24, 2014, 2:44:21 PM
    Author     : DucTuan
    Doc        : Page
*/

/*Page Question*/
#page_indexindex{
    .Inner{
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        -overflow-scrolling: touch;
    }
}
.UI_Header .Inner{
    overflow: hidden!important;
}
#page_indexstatistic,
#page_indexindex{
    .UI_Header{
        .Inner{
            @include image("back.png");
            background-position: 6px center;
            background-size: 17px 16px;

            .Header_text{
                padding-left:22px;
            }
        }
        select{
            display: none;
        }
    }
}
.Question_wrapper{
    .Block{
        height: 41px;
    }
}
.Question{

    margin: 0px 14px 0px 14px;
    background: rgba(244,167,41,.6);
    padding: 4px;
    line-height: 19px;
    font-size: 16px;
    @include border-radius(7px);

    .Inner{
        background: #e6e7e9;
        @include border-radius(6px);
        padding: 12px!important;
    }

    .alignRight{
        margin-top: 8px;
        a{
            display: inline-block;
            padding: 3px 9px;
            @include border-radius(3px);
            box-shadow: 1px 1px 0px #fff;
            line-height: 22px;
            font-size:13px;
            font-weight:bold;
            i{
                font-size: 16px;
                float: left;
                margin-right: 5px;
                margin-top: 3px;
            }
        }
        .btnShare{
            background: #4965b5;
        }
        .btnStatistic{
            background: #009600;
            margin-right: 8px;
        }
        .btnShare.hover{
            background:#00ADED;
        }
        .btnStatistic.hover{
            background: #007100;
        }

    }
    .center{
        text-align: center;
        .btnClose{
            display: inline-block;
            background: #009600;
            padding: 5px 15px;
            border-radius: 4px;
            margin-top: 10px;
            i{
                margin-right: 10px;
            }
        }
    }
    .Result_Warning{
        text-align:center;
        font-size:16px;
        h4{
            margin-bottom: 10px;
        }
        p{
            line-height: 21px;
        }
    }
}


.Answers_wrapper{
    position: relative;
}
.Answers{
    font-size: 15px;
    margin: 0px 44px 20px 61px;
    padding-top:20px;
    a{
        display: block;
        position: relative;
        @include border-radius(12px);
        line-height: 18px;
        color: #333;
        margin-bottom: 16px;
        padding: 11px 5px 11px 25px;
        box-shadow: 0px 2px 0px #fff inset;
        @include bg_gradient2(#eeeeee,#d7d7d8);
        @include border-radius(10px);
        border-top: 1px solid #bbb;
    }
    a.hover,a.active{
        background:#009600;
        color:#fff;
        box-shadow: 0px 1px 0px #8ADFFF inset;
    }
    a:before{
        content:" ";
        display:block;
        position:absolute;
        height:34px;
        width:34px;
        @include bg_image('a.png');
        left:-25px;
        top:1px;

    }
    a span{
        display:block;
        font-weight: bold;
        height:34px;
        width:34px;
        text-align:center;
        left:-25px;
        top:1px;
        position:absolute;
        line-height:35px;
        color:#333!important;
    }

    a:nth-child(1n):before{
        @include rotate(10deg);
    }
    a:nth-child(2n):before{
        @include rotate(90deg);
    }
    a:nth-child(3n):before{
        @include rotate(-30deg);
    }
    a:nth-child(4n):before{
        @include rotate(90deg);
    }
}
.Answers.Absolute{
    position: absolute;
    left: 61px;
    right: 44px;
    top: 0px;
    bottom: 0px;
    margin: auto;
    padding:0px;
}

.User_avatar{
    width: 96px;
    height: 96px;
    margin: auto;
    @include border-radius(40%);
    overflow:hidden;
    background: rgba(51, 51, 51, 0.25);
    padding: 3px 3px 4px 3px;
    div{
        @include border-radius(40%);
        width: 100%;
        height: 100%;
        background-size: cover!important;
        background-position: center center;
        background-repeat: no-repeat;
        input{
            width: 100%;
            height: 100%;
            opacity: 0;
        }
    }
}
#Avatar_rotate{
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    right: 44px;
    top: 63px;
    font-size: 15px;
    color: #1F2584;
    line-height: 40px;
}
#Avatar_rotate.hover{
    opacity: .5;
}
.User_avatar.rotate_0{
    @include rotate(0deg); 
}
.User_avatar.rotate_1{
    @include rotate(90deg); 
}
.User_avatar.rotate_2{
    @include rotate(180deg); 
}
.User_avatar.rotate_3{
    @include rotate(270deg); 
}
.User_name{
    color: #000000;
    font-size: 16px;
    font-family: $base_fontavo;
    text-align: center;
    margin-top: 5px;
}
.User_point{
    background: #cccccc;
    font-size: 17px;
    display: inline-block;
    margin: auto;
    margin-top: 10px;
    padding: 10px 14px;
    font-family: $base_fontavob;
    border-radius: 20px;
    position: relative;
    color: #e01d2b;
}
.User_point:after{
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    border: 6px solid transparent;
    border-left: 13px solid #cccccc;
    right: -10px;
    top: -2px;
    display: block;
    transform: rotateZ(-39deg);
    -webkit-transform: rotateZ(-39deg);
}
.UI_BarBody{
    header{
        color: #003300;
        text-transform: uppercase;
        font-size: 16px;
        font-family: $base_fontb;
        margin-bottom: 5px;
        text-align: center;
    }
}
.User_rank{
    text-align: center;
    margin-top:20px;
    .User_rank_list{
        font-family: $base_font;
        color: #fff;
        a{
            color: #003300;
            font-size:14px;
            span{
                color: #fff;
            }
        }
    }

    a:after{
        content: " ";
        height: 9px;
        display: inline-block;
        width: 1px;
        background: #ffcc00;
        margin: 0px -1px 0px 5px;
    }
    a:last-child:after{
        display: none;
    }
}

.User_info{
    margin: 43px 20px 0px 26px;
    font-size: 14px;
    line-height: 21px;
    .Info_item{
        border-bottom: 1px solid #dbd3cb;
        padding: 10px 0px 1px 0px;
    }
}

.NotLogin{
    margin: 43px 20px 0px 26px;
    text-align: center;
    font-size: 15px;
    font-size: 14px;
    line-height: 21px;
    a{
        white-space: nowrap;
        background: #000096;
        padding: 10px 20px;
        border-radius: 20px;
        display: inline-block;
        margin-top: 6px;
    }
    a.linkRegister{
        background:#009600;
    }
    a.hover{
        background: #0075FF;
    }
}

.btnNext{
    margin-top: 25px;
    display: inline-block;
    height: 41px;
    color: #fff;
    width: 41px;
    text-align: center;
    border-radius: 50%;
    background: rgba(0,0,0,.5);
    i{
        font-size: 22px;
        margin-top: 11px;
    }
}
.btnNext.hover{
    background:rgba(0,117,255,.9);
    i{
        color: #fff;
    }
}
.link{
    color: #333333;
    font-size: 14px;
    display: block;
    margin-top: 15px;
    text-align: center;
    font-family: $base_fontb;
}
.link.hover{
    text-decoration: underline;
}



#Statistic{
    background: #fff;
    position: absolute;
    bottom: 0px;
    top: 0px;
    right: 0px;
    left: 0px;
    padding: 10px 5px 0px 5px;
}
#Share{
    background:#ececec;
    position: absolute;
    height: 55px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}
.ShareOn{
    width: 152px;
    height: 36px;
    @include bg_image('share.png');
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
}
.Statistic_Header{
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    padding-bottom: 12px;
    height: 30px; 
}
.Statistic_Chart{
    $colum_color: #009600;
    width: 100%;
    height:46%;
    border-bottom: 5px solid $colum_color;
    padding-bottom: 1px;


    .Column{
        height: 100%;
        color: #fff;
        float: left;
        padding: 0px 9px 0px 8px;
        p{
            color: #333;
            text-align: center;
        }
        .Column_Innser{
            height: 100%;
            background: #f7f7f7;
        }
        .Column_Desc{
            font-weight: bold;
            margin-top: 5px;
            color: $colum_color;
            font-size: 15px;
        }
    }
}

.Statistic_Description{
    width: 100%;
    height: 42%;
    margin-top: 20px;
    overflow-y:auto;
    -webkit-overflow-scrolling: touch;
    -overflow-scrolling: touch;

    .Des_Answer{
        margin-top: 20px;
        a{
            position: relative;
            color: #333;
            display: block;
            font-size: 15px;
            padding-bottom: 16px;
            padding-top: 16px;
            padding-left: 45px;
            span{
                font-weight: bold;
                line-height: 34px;
                text-align: center;
                display: block;
                height: 34px;
                width: 34px;
                position: absolute;
                top: 7px;
                left: 5px;
                z-index: 999;
            }
        }
        a:before{
            content:" ";
            display:block;
            position:absolute;
            height:34px;
            width:34px;
            @include bg_image('a.png');
            top: 7px;
            left: 5px;
            z-index: 0;
        }
        a:nth-child(1n):before{
            @include rotate(10deg);
        }
        a:nth-child(2n):before{
            @include rotate(90deg);
        }
        a:nth-child(3n):before{
            @include rotate(-30deg);
        }
        a:nth-child(4n):before{
            @include rotate(90deg);
        }
        a:nth-child(odd){
            background-color: #ddd;
        }
        a:nth-child(even){
            background-color: #f5f5f5;
        }
    }
}

#About {
    .Form{
        header,div{
            text-align: left;
            line-height: 23px;
        }
        div{
            font-size: 15px;
        }
    }
}